<template>
    <div>
        <div class="location">
            <strong>当前位置:</strong>
            <span>用户管理页面</span>
        </div>
        <div class="search">
            <form ref="searchUser">
                <span>用户名：</span>
                <input
                        type="text"
                        v-model="userCondition.realName"
                        class="input-text"
                >
                <span>角色：</span>
                <select v-model="userCondition.role" name="queryRoleId">
                    <option value="">--全部--</option>
                    <option
                            v-for="item in roleList"
                            :key="item.id"
                            :value="item.id"
                            :selected="selected">
                        {{ item.roleName }}
                    </option>
                </select>
                <input type="hidden" name="currentPage" value="1"/>
                <input value="查 询" type="submit" class="querySubmit" id="search-button">
                <router-link to="/home/user/add">添加</router-link>
            </form>
        </div>
        <!--用户-->
        <table class="supplierTable">
            <tr class="firstTr">
                <th>账号</th>
                <th>真实姓名</th>
                <th>角色</th>
                <th>性别</th>
                <th>年龄</th>
                <th>电话</th>
                <th>操作</th>
            </tr>

            <tr v-for="item in userList" :key="item.id">
                <td>
                    <span>{{ item.account }}</span>
                </td>
                <td>
                    <span>{{ item.realName }}</span>
                </td>
                <td>
                    <span>{{ item.roleName }}</span>
                </td>
                <td>
                    <span v-if="item.sex===1">男</span>
                    <span v-if="item.sex===2">女</span>
                </td>
                <td>
                    <span>{{ item.age }}</span>
                </td>
                <td>
                    <span>{{ item.phone }}</span>
                </td>
                <td>
                    <span>
                        <a class="viewUser" href="javascript:;" :userid="item.id" :account="item.account">
                            <img src="@/assets/image/view.png" alt="查看" title="查看"/>
                        </a>
                    </span>
                    <span>
                        <router-link :to="`/home/user/update/${item.id}`">
                            <img src="@/assets/image/upd.png" alt="修改" title="修改"/>
                        </router-link>
                    </span>
                    <span>
                        <a class="deleteUser" href="#">
                            <img src="@/assets/image/del.png" alt="删除" title="删除"/>
                        </a>
                    </span>
                </td>
            </tr>
        </table>
        <CvsPage :pageInfo="pageInfo"/>
    </div>


</template>

<script>
import CvsPage from "@/components/common/CvsPage.vue";

export default {
    name: "SysUser",
    components: {CvsPage},
    data() {
        return {
            userCondition: {
                realName: '',
                role: 0
            },
            roleList: [
                {
                    id: 1,
                    roleName: '管理员'
                }
            ],
            // 分页数据
            pageInfo:{

            },
            userList: [

            ]
        }
    },
    computed: {
        //下拉列表被选中的计算属性
        selected() {
            return this.roleList.forEach(role => {
                return role.id === this.userCondition.role
            })
        }
    }
}
</script>

<style scoped>


option{
    text-align: center;
}

.location {
    height: 30px;
    line-height: 30px;
    border: 1px solid #e6eaf6;
    border-radius: 8px;
    background: linear-gradient(to bottom, #fefefe, #ffffff, #f6fafd);
    color: #4a4a4a;
    padding-left: 30px;
}

.location strong {
    background: url("@/assets/image/home.png") 0 center no-repeat;
    display: inline-block;
    padding-left: 30px;
}

.location span {
    color: #2179a9;
    font-weight: bold;
}

/*搜索信息栏*/
.search {
    height: 50px;
    line-height: 50px;
    background: #f6fafd;
    padding-left: 24px;
    color: #000;
}

.search .input-text {
    width: 200px;
    height: 30px;
    outline: none;
    padding-left: 10px;
    border: 1px solid #8ab2d5;
    border-radius: 4px;
}

.search .querySubmit {
    margin-left: 20px;
    width: 100px;
    padding: 0 20px;
    height: 30px;
    border: 1px solid #7ba92c;
    border-radius: 4px;
    color: #fff;
    font-weight: bold;
    background: #87c212 url("@/assets/image/search.png") 10px center no-repeat;
}

.search .querySubmit:focus {
    outline: none;
    background-color: #5d8410;
}

.search a {
    width: 80px;
    padding-left: 40px;
    float: right;
    margin: 10px 60px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #0c89de;
    border-radius: 4px;
    color: #fff;
    font-weight: bold;
    background: #47acf1 url("@/assets/image/tianjia.png") 10px center no-repeat;
    display: inline-block;
}

.search a:hover, .search a:active {
    background-color: #0778c5;
}

.search span {
    margin-left: 10px;
}

.search select {
    margin: 10px;
    width: 100px;
    height: 30px;
    border-radius: 4px;
    border: 1px solid #0c89de;
    outline: none;
}

#search-button {
    margin-left: 20px;
    width: 100px;
    padding: 0 20px;
    height: 30px;
    border: 1px solid #7ba92c;
    border-radius: 4px;
    color: #fff;
    font-weight: bold;
    background: #87c212 url("@/assets/image/search.png") 10px center no-repeat;
}

#search-button:focus {
    outline: none;
    background-color: #5d8410;
}

.supplierTable {
    margin: 0;
    padding: 0;
    width: 100%;
}

td{
    text-align: center;

}

.supplierTable tr:nth-of-type(0) {

    width: 15%;
}

.supplierTable tr:nth-of-type(1) {
    width: 15%;
}

.supplierTable tr:nth-of-type(2) {
    width: 10%;
}

.supplierTable tr:nth-of-type(3) {
    width: 10%;
}

.supplierTable tr:nth-of-type(4) {
    width: 10%;
}

.supplierTable tr:nth-of-type(5) {
    width: 30%;
}


</style>
